<template>
  <div class="feedback">
    <p class="title">帮助反馈</p>
    <div class="inputDiv">
      <field
        v-model="message"
        rows="1"
        autosize
        type="textarea"
        placeholder="请输入反馈意见"
      />
    </div>
    <div class="submitBtn" @click="submit()">提交</div>
  </div>
</template>

<script>
import { Field, Toast } from "vant";
import { feedbackInfo } from "@/api/user";

export default {
  name: "feedback",
  components: {
    Field
  },
  data() {
    return {
      accountName: "",
      message: ""
    };
  },
  mounted() {
    this.accountName = sessionStorage.getItem("account");
  },
  methods: {
    async submit() {
      if (!this.message) {
        Toast.fail("请输入内容");
        return;
      }
      Toast.success("提交成功");
      setTimeout(() => {
        this.$router.replace("/mine");
      }, 1000);
      return;
      let res = await feedbackInfo({
        account: this.accountName,
        feedback: this.message
      });
      if (res.code === 0) {
        Toast.success("提交成功");
        await this.$router.push("/mine");
      } else {
        Toast.fail(res.msg);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.feedback {
  .title {
    font-size: 18px;
    font-weight: 500;
    text-align: left;
    color: #ffffff;
    line-height: 36px;
    letter-spacing: 2px;
    margin-left: 20px;
    margin-top: 25px;
  }
  .inputDiv {
    margin-left: 8%;
    margin-top: 5%;
  }
  .submitBtn {
    width: 220px;
    height: 35px;
    font-size: 16px;
    line-height: 30px;
    letter-spacing: 7px;
    color: #ffffff;
    border-radius: 15px;
    text-align: center;
    background: linear-gradient(#ff89a5 0%, #fc5a69 100%);
    margin: 15% auto;
  }
}
/deep/ .van-cell {
  width: 90%;
  height: 220px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 1px 2px #ccc;
  margin-top: 15px;
}
/deep/ .van-field__label {
  margin-right: 5px;
  width: 50px;
}
</style>
